<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>uAdmin - Professional, Responsive and Flat Admin Template</title>
<meta name="description" content="uAdmin is a Professional, Responsive and Flat Admin Template created by pixelcave and published on Themeforest" />
<meta name="author" content="pixelcave" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic" />       
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/plugins.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="page-container">
<header class="navbar navbar-inverse">
<div class="navbar-inner remove-radius remove-box-shadow">
<div class="container-fluid">
<ul class="nav pull-right visible-phone visible-tablet">
<li class="divider-vertical remove-margin"></li>
<li>
<a href="javascript:void(0)" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-reorder"></i>
</a>
</li>
</ul>
<a href="index.php" class="brand"><img src="img/template/logo.png" alt="logo" /></a>
<div id="loading" class="hide pull-left"><i class="icon-certificate icon-spin"></i></div>
<ul id="widgets" class="nav pull-right">
<li class="divider-vertical remove-margin"></li>
<li id="rss-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-rss"></i>
<span class="badge badge-warning display-none"></span>
</a>
<ul class="dropdown-menu widget widget-fluid">
<li class="widget-heading text-center">Web Design</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-umbrella"></i>This is a headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-trophy"></i>Another headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-suitcase"></i>Headlines keep coming!</a></li>
<li class="widget-heading text-center">Web Developent</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-phone"></i>New headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-pencil"></i>Another one</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" class="text-center">All News</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="twitter-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-twitter"></i>
<span class="badge badge-info display-none"></span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><i class="icon-comments-alt pull-right"></i>Latest Tweets</li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Michael</a><span class="label label-info">just now</span></h6>
<div class="media">Web design all the way!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Monica</a><span class="label label-info">3 min ago</span></h6>
<div class="media">Download free PSDs at <a href="http://bit.ly/YUs4SQ" target="_blank">http://bit.ly/YUs4SQ</a></div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Steven</a><span class="label label-info">45 min ago</span></h6>
<div class="media">Be sure to check out my portfolio!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Tim</a><span class="label label-info">1 hour ago</span></h6>
<div class="media">Get all our themes for free for the next 2 hours! <a href="javascript:void(0)">#freebies</a></div>
</div>
</div>
</li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="messages-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-envelope"></i>
<span class="badge badge-success">1</span>
</a>
<ul class="dropdown-menu widget pull-right">
<li class="widget-heading"><i class="icon-comment pull-right"></i>Latest Messages</li>
<li class="new-on">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">George</a><span class="label label-success">2 min ago</span></h6>
<div class="media">Thanks for your help! The tutorial really helped me a lot!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Mike</a><span class="label">6 hours ago</span></h6>
<div class="media">The logo is ready, have a look and let me know what you think!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Julia</a><span class="label">1 day ago</span></h6>
<div class="media">We should better consider our social media marketing strategy!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Messages</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="notifications-widget" class="dropdown dropdown-center-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-flag"></i>
<span class="badge badge-important">1</span>
<span class="badge badge-warning">2</span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-cog"></i></a><a href="javascript:void(0)" class="widget-link">System</a></li>
<li>
<ul>
<li class="label label-important">20 min ago</li>
<li class="text-error">Support system is down for maintenance!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">3 hours ago</li>
<li class="text-warning">PHP upgrade started!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">5 hours ago</li>
<li class="text-warning"><a href="javascript:void(0)" class="widget-link">1 support ticket</a> just opened!</li>
</ul>
</li>
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-bookmark"></i></a><a href="javascript:void(0)" class="widget-link">Project #3</a></li>
<li>
<ul>
<li class="label label-success">3 weeks ago</li>
<li class="text-success">Project #3 <a href="javascript:void(0)" class="widget-link">published</a> successfully!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-info">1 month ago</li>
<li class="text-info">Milestone #3 achieved!</li>
<li class="text-info"><a href="javascript:void(0)" class="widget-link">John Doe</a> joined the project!</li>
</ul>
</li>
<li>
<ul>
<li class="label">1 year ago</li>
<li class="text-muted">This is an old notification</li>
</ul>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Notifications</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li class="dropdown dropdown-user">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><img src="img/template/avatar.png" alt="avatar" /> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" class="loading-on"><i class="icon-refresh"></i> Refresh</a>
</li>
<li class="divider"></li>
<li>
<a href="#modal-user-settings" role="button" data-toggle="modal"><i class="icon-user"></i> User Profile</a>
</li>
<li>
<a href="javascript:void(0)"><i class="icon-wrench"></i> App Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="page_login.php"><i class="icon-lock"></i> Log out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div id="inner-container"><aside id="page-sidebar" class="nav-collapse collapse">
<form id="sidebar-search" method="post" onsubmit="return false;" />
<div class="input-append">
<input type="text" placeholder="Search.." class="remove-box-shadow remove-transition remove-radius" />
<button><i class="icon-search"></i></button>
</div>
</form>
<nav id="primary-nav">
<ul>
<li>
<a href="index.php"><i class="icon-fire"></i>Dashboard</a>
</li>
<li class="active">
<a href="#"><i class="icon-magic"></i>UI Elements</a>
<ul>
<li>
<a href="page_ui_general.php"><i class="icon-star"></i>General</a>
</li>
<li>
<a href="page_forms.php" class="active"><i class="icon-th-list"></i>Forms</a>
</li>
<li>
<a href="page_tables.php"><i class="icon-table"></i>Tables</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-leaf"></i>Components</a>
<ul>
<li>
<a href="page_charts.php"><i class="icon-bar-chart"></i>Charts</a>
</li>
<li>
<a href="page_calendar.php"><i class="icon-calendar"></i>Calendar</a>
</li>
<li>
<a href="page_datatables.php"><i class="icon-th"></i>DataTables</a>
</li>
</ul>
</li>
<li>
<a href="page_typography.php"><i class="icon-font"></i>Typography</a>
</li>
<li>
<a href="page_gallery.php"><i class="icon-picture"></i>Gallery</a>
</li>
<li>
<a href="#"><i class="icon-tint"></i>Icons</a>
<ul>
<li>
<a href="page_fontawesome.php">FontAwesome</a>
</li>
<li>
<a href="page_gemicon.php">Gemicon</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-file-alt"></i>Pages</a>
<ul>
<li>
<a href="page_profile.php">Profile</a>
</li>
<li>
<a href="page_faq.php">Faq</a>
</li>
<li>
<a href="page_errors.php">Errors</a>
</li>
<li>
<a href="page_blank.php">Blank</a>
</li>
</ul>
</li>
<li>
<a href="page_login.php"><i class="icon-off"></i>Login Page</a>
</li>
</ul>
</nav>
</aside><div id="page-content">
<ul id="nav-info" class="clearfix">
<li><a href="index.php"><i class="icon-home"></i></a></li>
<li><a href="javascript:void(0)">UI Elements</a></li>
<li class="active"><a href="">Forms</a></li>
</ul>
<form class="form-horizontal form-box" onsubmit="return false;" />
<h4 class="form-box-header">Text Inputs</h4>
<div class="form-box-content">
<div class="control-group">
<label class="control-label" for="example-input-mini">Mini</label>
<div class="controls">
<input type="text" id="example-input-mini" class="input-mini" />
<span class="help-inline"><code>.input-mini</code></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-small">Small</label>
<div class="controls">
<input type="text" id="example-input-small" class="input-small" />
<span class="help-inline"><code>.input-small</code></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-medium">Medium</label>
<div class="controls">
<input type="text" id="example-input-medium" class="input-medium" />
<span class="help-inline"><code>.input-medium</code></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-large">Large</label>
<div class="controls">
<input type="text" id="example-input-large" class="input-large" />
<span class="help-inline"><code>.input-large</code></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-xlarge">xLarge</label>
<div class="controls">
<input type="text" id="example-input-xlarge" class="input-xlarge" />
<span class="help-inline"><code>.input-xlarge</code></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Disabled</label>
<div class="controls">
<input type="text" class="input-xlarge uneditable-input" disabled="" />
<span class="help-inline"><code>.uneditable-input</code></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-inline">Inline</label>
<div class="controls">
<input type="text" id="example-input-inline" class="input-medium" placeholder="Placeholder text.." />
<input type="text" class="input-small" />
<span class="help-block">Placeholder attribute works with older browsers too!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-prepend">Prepend Content</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" id="example-input-prepend" class="input-small" placeholder="username" />
</div>
<div class="input-prepend">
<span class="add-on">Firstname:</span>
<input type="text" id="example-input-prepend2" class="input-small" placeholder="enter.." />
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-twitter"></i></span>
<input type="text" id="example-input-prepend3" class="input-small" placeholder="@username" />
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-facebook"></i></span>
<input type="text" id="example-input-prepend4" class="input-small" placeholder="@username" />
</div>
<span class="help-block"><em>Text or icons</em></span>
</div>
<div class="controls">
<div class="input-prepend">
<button class="btn">Search</button>
<input type="text" id="example-input-prepend-btn" class="input-small" placeholder="username" />
</div>
<div class="input-prepend">
<button class="btn btn-success"><i class="icon-search"></i></button>
<input type="text" id="example-input-prepend-btn2" class="input-small" placeholder="search.." />
</div>
<div class="input-prepend">
<button class="btn btn-primary"><i class="icon-facebook"></i></button>
<button class="btn btn-info"><i class="icon-twitter"></i></button>
<button class="btn btn-danger"><i class="icon-pinterest"></i></button>
<input type="text" id="example-input-prepend-btn3" class="input-small" placeholder="@username" />
</div>
<span class="help-block"><em>Buttons with text or icons</em></span>
</div>
<div class="controls">
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Option 1</a></li>
<li><a href="javascript:void(0)">Option 2</a></li>
<li><a href="javascript:void(0)">Option 3</a></li>
</ul>
</div>
<input id="example-input-prepend-dd" type="text" placeholder="..." />
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn btn-primary"><i class="icon-facebook"></i></button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)"><i class="icon-twitter"></i> Twitter</a></li>
<li><a href="javascript:void(0)"><i class="icon-google-plus"></i> Google Plus+</a></li>
<li><a href="javascript:void(0)"><i class="icon-linkedin"></i> Linkedin</a></li>
<li><a href="javascript:void(0)"><i class="icon-pinterest"></i> Pinterest</a></li>
</ul>
</div>
<input id="example-input-prepend-dd2" type="text" placeholder="@username" />
</div>
<span class="help-block"><em>Buttons and Dropdowns</em></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-append">Append Content</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-input-append" class="input-mini text-right" placeholder="00" />
<span class="add-on">.00</span>
</div>
<div class="input-append">
<input type="text" id="example-input-append2" class="input-small" placeholder="Email" />
<span class="add-on"><i class="icon-envelope"></i></span>
</div>
<div class="input-append">
<input type="text" id="example-input-append3" class="input-large" placeholder="Add url" />
<span class="add-on"><i class="icon-rss"></i></span>
</div>
<span class="help-block"><em>Text or icons</em></span>
</div>
<div class="controls">
<div class="input-append">
<input type="text" id="example-input-append-btn" class="input-small" placeholder="username" />
<button class="btn">Search</button>
</div>
<div class="input-append">
<input type="text" id="example-input-append-btn2" class="input-small" placeholder="search.." />
<button class="btn btn-success"><i class="icon-search"></i></button>
</div>
<div class="input-append">
<input type="text" id="example-input-append-btn3" class="input-small" placeholder="@username" />
<button class="btn btn-primary"><i class="icon-facebook"></i></button>
<button class="btn btn-info"><i class="icon-twitter"></i></button>
<button class="btn btn-danger"><i class="icon-pinterest"></i></button>
</div>
<span class="help-block"><em>Buttons with text or icons</em></span>
</div>
<div class="controls">
<div class="input-append">
<input id="example-input-append-dd" type="text" placeholder="..." />
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Option 1</a></li>
<li><a href="javascript:void(0)">Option 2</a></li>
<li><a href="javascript:void(0)">Option 3</a></li>
</ul>
</div>
</div>
<div class="input-append">
<input id="example-input-append-dd2" type="text" placeholder="@username" />
<div class="btn-group">
<button class="btn btn-primary"><i class="icon-facebook"></i></button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)"><i class="icon-twitter"></i> Twitter</a></li>
<li><a href="javascript:void(0)"><i class="icon-google-plus"></i> Google Plus+</a></li>
<li><a href="javascript:void(0)"><i class="icon-linkedin"></i> Linkedin</a></li>
<li><a href="javascript:void(0)"><i class="icon-pinterest"></i> Pinterest</a></li>
</ul>
</div>
</div>
<span class="help-block"><em>Buttons and Dropdowns</em></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-preapppend">Prepend &amp; Append Content</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input type="text" id="example-input-preapppend" class="input-mini text-right" placeholder="00" />
<span class="add-on">.00</span>
</div>
<div class="input-prepend input-append hidden-phone">
<span class="add-on"><i class="icon-facebook"></i></span>
<span class="add-on">Facebook</span>
<input type="text" id="example-input-preapppend2" class="input-small text-center" placeholder="@username" />
<span class="add-on"><i class="icon-user"></i></span>
</div>
<span class="help-block"><em>Text or icons</em></span>
</div>
<div class="controls">
<div class="input-prepend input-append">
<button class="btn btn-primary"><i class="icon-facebook"></i></button>
<input type="text" id="example-input-preapppend-btn" class="input-small text-center" placeholder="@username" />
<button class="btn btn-info"><i class="icon-twitter"></i></button>
</div>
<div class="input-prepend input-append">
<button class="btn btn-primary hidden-phone"><i class="icon-facebook"></i></button>
<button class="btn btn-primary">Friends</button>
<input type="text" id="example-input-preapppend-btn2" class="input-small text-center" placeholder="@username" />
<button class="btn btn-info"><i class="icon-twitter"></i></button>
<button class="btn btn-info hidden-phone">Followers</button>
</div>
<span class="help-block"><em>Buttons with text or icons</em></span>
</div>
<div class="controls">
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Edit</a></li>
<li><a href="javascript:void(0)">Delete</a></li>
</ul>
</div>
<input type="text" id="example-input-preappend-dd" class="input-mini" placeholder="@username" />
<button class="btn btn-warning"><i class="icon-warning-sign"></i></button>
</div>
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)"><i class="icon-twitter"></i> Twitter</a></li>
<li><a href="javascript:void(0)"><i class="icon-google-plus"></i> Google Plus+</a></li>
<li><a href="javascript:void(0)"><i class="icon-linkedin"></i> Linkedin</a></li>
<li><a href="javascript:void(0)"><i class="icon-pinterest"></i> Pinterest</a></li>
</ul>
</div>
<input type="text" id="example-input-preappend-dd2" class="input-small" placeholder="@username" />
<button class="btn btn-primary"><i class="icon-facebook"></i></button>
</div>
<span class="help-block"><em>Buttons and Dropdowns</em></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-typeahead">Typeahead</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-input-typeahead" class="example-typeahead" placeholder="search.." />
<button class="btn"><i class="icon-search"></i></button>
</div>
<span class="help-inline"><code>.example-typeahead</code></span>
</div>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-success" value="Save changes" />
<input type="submit" class="btn btn-danger" value="Cancel" />
</div>
</div>
</form>
<form class="form-horizontal form-box" onsubmit="return false;" />
<h4 class="form-box-header">Validation States</h4>
<div class="form-box-content">
<div class="control-group">
<label class="control-label" for="example-input-tooltip">Tooltip</label>
<div class="controls">
<input type="text" id="example-input-tooltip" data-toggle="tooltip" data-placement="right" title="Info!" />
<span class="help-block">Tooltip with info</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-popover">Popover</label>
<div class="controls">
<input type="text" id="example-input-popover" data-toggle="popover" data-placement="top" data-title="Information" data-content="This is some dummy content! Inform the user about input requirements!" />
<span class="help-block">Popover with info</span>
</div>
</div>
<div class="control-group">
<label class="control-label text-error" for="example-input-email">Email (*)</label>
<div class="controls">
<input type="email" id="example-input-email" placeholder="test@example.com" required="" />
<span class="help-block"><em>For browsers that support </em> <code>required</code> <em>attribute, the border of the input remains red until the content is valid!</em></span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="example-input-success">Success</label>
<div class="controls">
<input type="text" id="example-input-success" />
<span class="help-inline"><i class="icon-ok"></i> Valid!</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="example-input-info">Info</label>
<div class="controls">
<input type="text" id="example-input-info" />
<span class="help-inline"><i class="icon-info-sign"></i> Email exists!</span>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="example-input-warning">Warning</label>
<div class="controls">
<input type="password" id="example-input-warning" />
<span class="help-inline"><i class="icon-warning-sign"></i> The password is too small!</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="example-input-error">Error</label>
<div class="controls">
<input type="text" id="example-input-error" />
<input type="password" id="example-input-error2" />
<span class="help-inline"><i class="icon-remove"></i> Login failed!</span>
</div>
</div>
</div>
</form>
<form class="form-horizontal form-box" onsubmit="return false;" />
<h4 class="form-box-header">Pickers</h4>
<div class="form-box-content">
<div class="control-group">
<label class="control-label" for="example-input-colorpicker">Color</label>
<div class="controls">
<input type="text" id="example-input-colorpicker" class="input-mini input-colorpicker" />
<span class="help-inline"><code>.input-colorpicker</code></span>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-append input-colorpicker color" data-color="#db4a39">
<input type="text" class="input-mini" />
<span class="add-on"><i style="background-color: #db4a39"></i></span>
</div>
<span class="help-inline">As a component</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-append input-colorpicker color" data-color="rgba(0,0,0,1)" data-color-format="rgba">
<input type="text" />
<span class="add-on"><i style="background-color: rgba(0,0,0,1)"></i></span>
</div>
<span class="help-inline">RGBa</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-timepicker">Time</label>
<div class="controls">
<div class="input-append bootstrap-timepicker">
<input type="text" id="example-input-timepicker" class="input-mini input-timepicker" />
<span class="add-on"><i class="icon-time"></i></span>
<span class="help-inline"><code>.input-timepicker</code></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-datepicker">Date</label>
<div class="controls">
<input type="text" id="example-input-datepicker" class="input-small input-datepicker" />
<span class="help-inline"><code>.input-datepicker</code></span>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-append date input-datepicker" data-date="15-04-2013" data-date-format="dd-mm-yyyy">
<input type="text" class="input-small" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<span class="help-inline">As a component</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-input-daterangepicker">Date Range</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-input-daterangepicker" class="input-daterangepicker" />
<span class="add-on"><i class="icon-calendar"></i></span>
<span class="help-inline"><code>.input-daterangepicker</code></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Advanced Date Range</label>
<div class="controls">
<div id="example-advanced-daterangepicker" class="btn">
<i class="icon-calendar"></i>
<span></span>
<b class="caret"></b>
</div>
</div>
</div>
<div class="form-actions">
<button class="btn btn-success"><i class="icon-save"></i> Save</button>
<button class="btn btn-danger"><i class="icon-remove"></i> Delete</button>
</div>
</div>
</form>
<form class="form-horizontal form-box" onsubmit="return false;" />
<h4 class="form-box-header">Textareas</h4>
<div class="form-box-content">
<div class="control-group">
<label class="control-label" for="example-textarea">Default</label>
<div class="controls">
<textarea id="example-textarea" rows="3"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Disabled</label>
<div class="controls">
<textarea class="uneditable-textarea" rows="3" disabled="">This is a disabled textarea!</textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-textarea-large">Large</label>
<div class="controls">
<textarea id="example-textarea-large" class="textarea-large" rows="10"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-textarea-editor">WYSIWYG Editor</label>
<div class="controls">
<textarea id="example-textarea-editor" class="textarea-editor textarea-large" rows="10"></textarea>
<span class="help-block">Add the <code>.textarea-editor</code> class to a textarea to transform it into a wysiwyg editor</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-textarea-elastic">Elastic</label>
<div class="controls">
<textarea id="example-textarea-elastic" class="textarea-elastic" rows="3"></textarea>
<span class="help-block">Add the <code>.textarea-elastic</code> class to a textarea and will auto expand as you write</span>
</div>
</div>
<div class="form-actions">
<button class="btn btn-success"><i class="icon-save"></i> Save</button>
<button class="btn btn-danger"><i class="icon-remove"></i> Delete</button>
</div>
</div>
</form>
<form class="form-horizontal form-box" onsubmit="return false;" />
<h4 class="form-box-header">Switches, Checkboxes, Radios & Selects</h4>
<div class="form-box-content">
<!-- Switches -->
<div class="control-group">
<label class="control-label">Switches</label>
<div class="controls">
<div class="input-switch switch-large">
<input type="checkbox" checked="" />
</div>
<div class="input-switch">
<input type="checkbox" checked="" />
</div>
<div class="input-switch switch-small">
<input type="checkbox" checked="" />
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-switch" data-on="primary">
<input type="checkbox" checked="" />
</div>
<div class="input-switch" data-on="info">
<input type="checkbox" checked="" />
</div>
<div class="input-switch" data-on="success">
<input type="checkbox" checked="" />
</div>
<div class="input-switch" data-on="warning">
<input type="checkbox" checked="" />
</div>
<div class="input-switch" data-on="danger">
<input type="checkbox" checked="" />
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-switch" data-on="success" data-off="danger">
<input type="checkbox" checked="" />
</div>
<div class="input-switch" data-on="success" data-off="danger" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" checked="" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls">
<label class="checkbox" for="example-checkbox1">
<input type="checkbox" id="example-checkbox1" value="option1" /> Option1
</label>
<label class="checkbox" for="example-checkbox2">
<input type="checkbox" id="example-checkbox2" value="option2" /> Option2
</label>
<label class="checkbox" for="example-checkbox3">
<input type="checkbox" id="example-checkbox3" value="option3" /> Option3
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls">
<label class="checkbox inline" for="example-checkbox-inline1">
<input type="checkbox" id="example-checkbox-inline1" value="option1" /> Option1
</label>
<label class="checkbox inline" for="example-checkbox-inline2">
<input type="checkbox" id="example-checkbox-inline2" value="option2" /> Option2
</label>
<label class="checkbox inline" for="example-checkbox-inline3">
<input type="checkbox" id="example-checkbox-inline3" value="option3" /> Option3
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Radios</label>
<div class="controls">
<label class="radio" for="example-radio1">
<input type="radio" id="example-radio1" name="example-radios" value="option1" /> Option1
</label>
<label class="radio" for="example-radio2">
<input type="radio" id="example-radio2" name="example-radios" value="option2" /> Option2
</label>
<label class="radio" for="example-radio3">
<input type="radio" id="example-radio3" name="example-radios" value="option3" /> Option3
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Inline Radios</label>
<div class="controls">
<label class="radio inline" for="example-radio-inline1">
<input type="radio" id="example-radio-inline1" name="example-radios-inline" value="option1" /> Option1
</label>
<label class="radio inline" for="example-radio-inline2">
<input type="radio" id="example-radio-inline2" name="example-radios-inline" value="option2" /> Option2
</label>
<label class="radio inline" for="example-radio-inline3">
<input type="radio" id="example-radio-inline3" name="example-radios-inline" value="option3" /> Option3
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-select">Select</label>
<div class="controls">
<select id="example-select">
<option />html
<option />css
<option />javascript
<option />php
<option />mysql
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-select-multiple">Multiple Select</label>
<div class="controls">
<select id="example-select-multiple" multiple="multiple">
<option />html
<option />css
<option />javascript
<option />php
<option />mysql
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-select-chosen">Chosen Select</label>
<div class="controls">
<select id="example-select-chosen" class="select-chosen">
<option />html
<option />css
<option />javascript
<option />php
<option />mysql
</select>
<span class="help-block"><code>.select-chosen</code></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-select-chosen-multiple">Chosen Select Multiple</label>
<div class="controls">
<select id="example-select-chosen-multiple" multiple="multiple" class="select-chosen">
<option selected="" />html
<option />css
<option />javascript
<option />php
<option />mysql
</select>
<span class="help-block"><code>.select-chosen</code></span>
</div>
</div>
<div class="form-actions">
<button class="btn btn-success"><i class="icon-wrench"></i> Update Settings</button>
</div>
</div>
</form>
<form class="form-horizontal form-box" enctype="multipart/form-data" onsubmit="return false;" />
<h4 class="form-box-header">File Upload</h4>
<div class="form-box-content">
<div class="control-group">
<label class="control-label" for="example-file">Default</label>
<div class="controls">
<input type="file" id="example-file" />
</div>
</div>
<div class="form-actions">
<button class="btn btn-success"><i class="icon-upload"></i> Upload</button>
<button class="btn btn-danger">Cancel</button>
</div>
</div>
</form>
<div class="form-box hidden-phone">
<h4 class="form-box-header form-box-header-push">Dropzone <small>Just add <code>.dropzone</code> class to a form! On unsupported browsers it will fall back to normal input</small></h4>
<div class="form-box-content">
<form action="page_forms.php" class="dropzone" />
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
</div>
</div>
<form class="form-box" />
<h4 class="form-box-header form-box-header-push">Input Grid</h4>
<div class="form-box-content">
<div class="controls controls-row">
<input type="text" class="span1" placeholder=".span1" />
<input type="text" class="span5" placeholder=".span5" />
</div>
<div class="controls controls-row">
<input type="text" class="span2" placeholder=".span2" />
<input type="text" class="span4" placeholder=".span4" />
</div>
<div class="controls controls-row">
<input type="text" class="span3" placeholder=".span3" />
<input type="text" class="span3" placeholder=".span3" />
</div>
<div class="controls controls-row">
<input type="text" class="span4" placeholder=".span4" />
<input type="text" class="span2" placeholder=".span2" />
</div>
<div class="controls controls-row">
<input type="text" class="span5" placeholder=".span5" />
<input type="text" class="span1" placeholder=".span1" />
</div>
<div class="controls">
<input type="text" class="span6" placeholder=".span6" />
</div>
</div>
</form>
</div>
<footer>
<script>var d = new Date(); if (d.getFullYear() === 2013) { document.write('2013'); } else { document.write('2013-' + d.getFullYear()); }</script> &copy; <strong>uAdmin 1.0</strong> - Crafted with <i class="icon-heart"></i> by <strong><a href="http://themeforest.net/user/pixelcave/portfolio?ref=pixelcave" target="_blank">pixelcave</a></strong>
</footer>
</div>
</div>
<a href="#" id="to-top"><i class="icon-chevron-up"></i></a>
<div id="modal-user-settings" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Profile Settings</h4>
</div>
<div class="modal-body">
<ul id="example-user-tabs" class="nav nav-tabs">
<li class="active"><a href="#example-user-tabs-account"><i class="icon-cogs"></i> Account</a></li>
<li><a href="#example-user-tabs-profile"><i class="icon-user"></i> Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-user-tabs-account">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> Password changed!
</div>
<form class="form-horizontal" />
<div class="control-group">
<label class="control-label" for="example-user-username">Username</label>
<div class="controls">
<input type="text" id="example-user-username" class="disabled" value="administrator" disabled="" />
<span class="help-block">You can't change your username!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pass">Password</label>
<div class="controls">
<input type="password" id="example-user-pass" />
<span class="help-block">if you want to change your password enter your current for confirmation!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-newpass">New Password</label>
<div class="controls">
<input type="password" id="example-user-newpass" />
</div>
</div>
</form>
</div>
<div class="tab-pane" id="example-user-tabs-profile">
<h5 class="page-header-sub hidden-phone">Image</h5>
<div class="form-horizontal hidden-phone">
<div class="control-group">
<img src="img/placeholders/image_dark_120x120.png" alt="image" />
</div>
<div class="control-group">
<form action="index.php" class="dropzone" />
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
</div>
</div>
<form class="form-horizontal" />
<h5 class="page-header-sub">Details</h5>
<div class="control-group">
<label class="control-label" for="example-user-firstname">Firstname</label>
<div class="controls">
<input type="text" id="example-user-firstname" value="John" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-lastname">Lastname</label>
<div class="controls">
<input type="text" id="example-user-lastname" value="Doe" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-gender">Gender</label>
<div class="controls">
<select id="example-user-gender">
<option />Male
<option />Female
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-birthdate">Birthdate</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-birthdate" class="input-small input-datepicker" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-skills">Skills</label>
<div class="controls">
<select id="example-user-skills" multiple="multiple" class="select-chosen">
<option selected="" />html
<option selected="" />css
<option />javascript
<option />php
<option />mysql
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-bio">Bio</label>
<div class="controls">
<textarea id="example-user-bio" class="textarea-elastic" rows="3">Bio Information..</textarea>
</div>
</div>
<h5 class="page-header-sub">Social</h5>
<div class="control-group">
<label class="control-label" for="example-user-fb">Facebook</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-fb" />
<span class="add-on"><i class="icon-facebook"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-twitter">Twitter</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-twitter" />
<span class="add-on"><i class="icon-twitter"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pinterest">Pinterest</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-pinterest" />
<span class="add-on"><i class="icon-pinterest"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-github">Github</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-github" />
<span class="add-on"><i class="icon-github"></i></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal"><i class="icon-remove"></i> Close</button>
<button class="btn btn-success"><i class="icon-spinner icon-spin"></i> Save changes</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/vendor/jquery-1.8.3.min.js"%3E%3C/script%3E'));</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script><script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16158021-6']);
  _gaq.push(['_setDomainName', 'pixelcave.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>